<template>
  <!--最外层的div-->
  <div class="layout-container">
    <!--顶部条件筛选-->
    <div class="layout-container-form flex space-between">
      <div class="layout-container-form-handle">
        <el-button type="primary"
                   :icon="Plus"
                   @click="handleAdd">添加私信内容</el-button>
      </div>
      <div class="layout-container-form-search">

      </div>
    </div>
    <!-- 
      下面的表格
    -->
    <div class="layout-container-table">
      <Table ref="table"
             v-model:page="page"
             v-loading="loading"
             :data="tableData"
             @getTableData="getTableData">

        <el-table-column prop="id"
                         label="ID"
                         align="center" />

        <el-table-column prop="name"
                         label="名称"
                         align="center" />

        <el-table-column label="私信内容"
                         align="center">
          <template #default="scope">
            <div style="height:50px;overflow-y:scroll;">
              <div>{{scope.row.content}}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建时间"
                         align="center">
          <template #default="scope">
            <span>
              {{parseTime(scope.row.create_time)}}
            </span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('message.common.handle')"
                         align="center"
                         fixed="right"
                         width="200">
          <template #default="scope">
            <!-- 运行按钮 -->
            <el-button type="primary"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-popconfirm :title="$t('message.common.delTip')"
                           @confirm="handleDel(scope.row)">
              <template #reference>
                <el-button type="danger">{{ $t('message.common.del') }}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
      <!--弹窗-->
      <Layer :layer="layer"
             @getTableData="getTableData"
             v-if="layer.show" />
    </div>
  </div>
</template>
<script lang="ts">
import { parseTime } from "@/utils/utils.ts";
import { defineComponent, ref, reactive } from "vue";
import Table from "@/components/table/index.vue";
// 引入的是一个对象（java里的那个对象），自定义的数据类型，或者叫实体类
import { Page } from "@/components/table/type";
// import { getData, del } from "@/api/table";
import { getKeysListApi, delKeyWordsApi } from "@/api/yuange/dy";
import Layer from "./layer.vue";
import { ElMessage } from "element-plus";
import type { LayerInterface } from "@/components/layer/index.vue";
import { selectData, radioData } from "./enum";
import { Plus, Search, Delete } from "@element-plus/icons";
export default defineComponent({
  name: "crudTable",
  components: {
    Table,
    Layer,
  },
  methods: {
    parseTime(value) {
      let time = parseTime(value);
      // console.log(time, "===");
      return time;
    },
  },
  setup() {
    // 存储搜索用的数据
    const query = reactive({
      input: "",
    });
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
    });
    // 分页参数, 供table使用
    const page: Page = reactive({
      index: 1,
      size: 10,
      total: 0,
    });
    const loading = ref(true);
    const tableData = ref([]);
    const chooseData = ref([]);
    const handleSelectionChange = (val: []) => {
      chooseData.value = val;
    };
    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTableData = (init: boolean) => {
      loading.value = true;
      //是不是第一页
      if (init) {
        page.index = 1;
      }
      //参数
      let params = {
        type: "response",
        page: page.index,
        pageSize: page.size,
        ...query,
      };
      getKeysListApi(params)
        .then((res) => {
          console.log(res, "关键词列表");
          if (res.code == 200) {
            tableData.value = res.data.list;
            page.total = res.data.total;
          }
        })
        .catch((error) => {
          tableData.value = [];
          page.index = 1;
          page.total = 0;
        })
        .finally(() => {
          loading.value = false;
        });
    };
    //删除功能
    const handleDel = (data: object[]) => {
      let params = {
        id: data.id,
      };
      delKeyWordsApi(params).then((res) => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        // 刷新表格
        getTableData(false);
      });
    };
    // 新增弹窗功能
    const handleAdd = () => {
      layer.title = "添加私信内容";
      layer.show = true;
      //js方法 delete 伤处对象的属性
      delete layer.row;
    };
    // 编辑弹窗功能
    const handleEdit = (row: object) => {
      layer.title = "编辑私信内容";
      layer.row = row;
      layer.show = true;
    };
    getTableData(true);
    return {
      Plus,
      Search,
      Delete,
      query,
      tableData,
      chooseData,
      loading,
      page,
      layer,
      handleSelectionChange,
      handleAdd,
      handleEdit,
      handleDel,
      getTableData,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>